<script setup lang="ts">
import { Flag, CircleClose } from "@element-plus/icons-vue";
import { ElIcon, ElTooltip } from "element-plus";
defineOptions({
  name: "VppUserMarker"
});
const props = defineProps<{
  name: string;
  emitClose: () => {};
  areaData: object;
  showIcon: boolean;
  handleStatus: string;
}>();
const clickTitle = () => {
  props.emitClose(props.areaData, "marker");
};
</script>

<template>
  <div class="title-box">
    <span v-if="handleStatus !== 'look'" class="close" @click="clickTitle">
      <el-icon size="14"><CircleClose /></el-icon>
    </span>
    <el-tooltip
      class="box-item"
      effect="dark"
      :content="areaData.data.name"
      placement="top"
    >
      <span class="icon-content"
        ><el-icon color="#ff4040" size="32"><Flag /></el-icon
      ></span>
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
.title-box {
  position: relative;
  display: flex;
  align-items: center;

  .close {
    position: absolute;
    top: -10px;
    right: -18px;
    width: 14px;
    height: 14px;
  }

  .icon-content {
    width: 32px;
    height: 32px;
    transform: translateX(7px);
  }
}
</style>
